<template>
  <van-nav-bar :title=title left-text="返回" left-arrow @click-left="onClickLeft">
    <template #right>
      <van-icon name="delete-o" size="36" @click="delAllGoods" />
    </template>
  </van-nav-bar>
</template>

<script>
import { Dialog, Toast } from "vant";
import { mapActions } from "vuex";
export default {
	name: "CartsTitle",
	props:['goodsNum'],
	data(){
		return{
			title:'购物车('+this.goodsNum+')'
		}
	},
  methods: {
    ...mapActions(["asynUpdateStorage", "asynDelAllgoods"]),
    onClickLeft() {
      this.$router.back();
    },
    delAllGoods() {
      let _self = this;
      Dialog.confirm({
        title: "确定清空所有商品？"
      })
        .then(() => {
          _self.asynDelAllgoods();
          _self.asynUpdateStorage();
          Toast.success("购物车已清空！");
        })
        .catch(() => {
          // on cancel
        });
    }
  }
};
</script>

<style scoped>
.van-nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  box-shadow: 0 1px 3px #ccc;
}
</style>
